<script setup lang="ts">
import '@wangeditor-next/editor/dist/css/style.css';

import { onBeforeUnmount, shallowRef } from 'vue';
import { Editor, Toolbar } from '@wangeditor-next/editor-for-vue';
import { isNumber } from 'lodash-es';
import type { IDomEditor, IEditorConfig } from '@wangeditor-next/editor';

interface Props {
  /**
   * 编辑器内容
   */
  value: string;
  /**
   * 提示内容
   */
  placeholder?: string;
  /**
   * 是否只读
   */
  readOnly?: boolean;
  /**
   * 自动聚焦
   */
  autoFocus?: boolean;
  /**
   * 编辑器的高度
   */
  height?: number | string;
}
defineOptions({
  name: 'WangEditorPage',
});

const props = withDefaults(defineProps<Props>(), {
  placeholder: '',
  autoFocus: false,
  disabled: false,
  height: 300,
});
const emits = defineEmits<{
  'update:value': [value: string];
  'blur': [editor: IDomEditor];
  'focus': [editor: IDomEditor];
}>();

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const editorHeight = computed<string>(() => {
  if (isNumber(props.height)) {
    return `${props.height}px`;
  }
  return props.height;
});

// 内容 HTML
const htmlContent = ref(props.value);
watch(htmlContent, value => {
  emits('update:value', value);
});

const toolbarConfig = {};

// TODO 完善MENU_CONF配置
const editorConfig: Partial<IEditorConfig> = {
  placeholder: props.placeholder,
  readOnly: props.readOnly,
  autoFocus: props.autoFocus,
  // MENU_CONF: {
  //   uploadImage: {
  //     headers: {
  //       Authorization: `Bearer ${useAuthenticationStore().accessToken}`,
  //     },
  //     server: `${baseUrl}/oss/upload/minio/image`,
  //     customInsert(res: Recordable, insertFn: InsertImageFnType) {
  //       insertFn(`${fileServerUrl}${res.data}`, '', '');
  //     },
  //   },
  //   insertImage: {
  //     onInsertedImage(imageNode: ImageElement | null) {
  //       if (isNull(imageNode)) {
  //         return;
  //       }
  //       insertedImage.value.push(imageNode.src);
  //     },
  //   },
  //   uploadVideo: {
  //     headers: {
  //       Authorization: `Bearer ${useAuthenticationStore().accessToken}`,
  //     },
  //     server: `${baseUrl}/oss/upload/minio/file`,
  //     customInsert(res: Recordable, insertFn: InsertVideoFnType) {
  //       insertFn(`${fileServerUrl}${res.data}`, '');
  //     },
  //   },
  //   insertVideo: {
  //     onInsertedVideo(VideoNode: VideoElement | null) {
  //       if (isNull(VideoNode)) {
  //         return;
  //       }
  //       insertedVideo.value.push(VideoNode.src);
  //     },
  //   },
  // },
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) {
    return;
  }
  editor.destroy();
});
function handleCreated(editor: IDomEditor) {
  editorRef.value = editor;
}
function handleFocus(editor: IDomEditor) {
  emits('focus', editor);
}
function handleBlur(editor: IDomEditor) {
  emits('blur', editor);
}
</script>

<template>
  <div class="editor-container">
    <Toolbar
      class="toolbar"
      :editor="editorRef"
      :default-config="toolbarConfig"
      mode="default"
    />
    <Editor
      v-model="htmlContent"
      class="editor-content"
      :default-config="editorConfig"
      mode="default"
      @on-created="handleCreated"
      @on-focus="handleFocus"
      @on-blur="handleBlur"
    />
  </div>
</template>

<style scoped lang="less">
.editor-container {
  border: 1px solid #e0e0e6;
  border-radius: 4px;
  padding: 2px;

  .toolbar {
    border-bottom: 1px solid #ccc;
  }
  .editor-content {
    height: v-bind(editorHeight) !important;
    overflow-y: hidden;
  }
}
</style>
